import './Layout.less';
import React from 'react';
import {connect} from 'react-redux';
import {Redirect, Route, Switch, withRouter} from "react-router-dom";
import url from "url";
import {Avatar, Col, Dropdown, Icon, Layout as AntLayout, Menu, Row} from "antd";
import routes from "../route/routes";

const {Header, Content, Footer} = AntLayout;

const DropMenu = (<Menu>
    <Menu.Item>
        <a>Logout</a>
    </Menu.Item>
</Menu>);

class Layout extends React.Component {
    constructor(props) {
        super(props);
        let {query = {go: '/'}} = url.parse(location.href, true);
        props.history.push(query.go);
    }

    componentDidMount() {
    }

    render() {
        return <div className={'layout-container'}>
            <AntLayout>
                <AntLayout>
                    <Header className={"header-container"}>
                        <Row type={"flex"} justify={"end"}>
                            <Col>
                                <Dropdown overlay={DropMenu}>
                                    <div>
                                        <Avatar size={"large"} shape={"circle"}></Avatar>
                                        &nbsp;&nbsp;&nbsp;<Icon type="down" style={{color: "#1890ff"}}/>
                                    </div>
                                </Dropdown>
                            </Col>
                        </Row>
                    </Header>
                    <Content className={"content-container"}>
                        <div className="inner-content-container">
                            <Switch>
                                {routes.map(route => <Route key={route.path} {...route} />)}
                            </Switch>
                        </div>

                    </Content>
                    <Footer className={"footer-container"}>© {new Date().getFullYear()} All right reserved by
                        &nbsp;<a target={"blank"} href="https://www.wison.com">Wison</a>
                    </Footer>
                </AntLayout>
            </AntLayout>
        </div>
    };
}

const mapStateToProps = (state, ownProps) => ({
});
const mapDispatchToProps = (dispatch, ownProps) => ({
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Layout));